<template>
    <el-select v-model="currentValue" :parentId="parentIdValue" :locale="locale" :placeholder="placeholderText" :key-name="keyName" :label-name="labelName" :disable-name="disableName" :with-disabled="withDisabled" :disabled="disabled" :clearable="clearable" :multiple="multiple" :filterable="filterable" :filter-size="filterSize" :remote="remotable" :remote-method="remoteMethod">
        <el-option v-for="option in options" :loading="isLoading" :key="option[keyName]" :label="option[labelName]" :value="option[keyName]" :disabled="option[disableName]"></el-option>
    </el-select>
</template>
<script>
    import component from '../component';
    import {isEmpty} from "../../filter";

    export default {
        name: 'sdCities',
        props: {
            value: {
                required: false
            },
            parentId: {
                required: true
            },
            locale: {
                type: String,
                required: true,
                default: 'cn'
            },
            placeholderText: {
                type: String,
                required: false,
                default: ''
            },

            keyName: {
                type: String,
                required: false,
                default: 'code'
            },
            // labelName: {
            //     type: String,
            //     required: false,
            //     default: 'name'
            // },
            disableName: {
                type: String,
                required: false,
                default: 'disabled'
            },
            withDisabled: {
                type: Boolean,
                required: false,
                default: true
            },
            disabled:{
                type: Boolean,
                required: false,
                default: false
            },
            clearable : {
                type: Boolean,
                required: false,
                default: true
            },
            multiple: {
                type: Boolean,
                required: false,
                default: false
            },
            filterable : {
                type: Boolean,
                required: false,
                default: true
            },
            filterSize : {
                type: Number,
                required: false,
                default: 0
            },
            remotable: {
                type: Boolean,
                required: false,
                default: false
            }
        },
        data () {
            return {
                labelName: this.$i18n.locale === 'en' ? 'ename' : 'name',
                isLoading: false,
                options: null,
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        methods: {
            fetchOptions(input) {
                console.group("-----cities.fetchOptions-------");
                console.debug("parentId: " + this.parentId);
                console.debug("input: " + input);
                console.debug("this.value: " + this.value);
                console.groupEnd();
                if(isEmpty(this.parentId)) {
                    return;
                }
                let url = "api/areaParam/queryCitiesByProvinceCode?provinceCode=" + this.parentId;
                component.fetchOptions(url, input, this);
            },
            remoteMethod(input) {
                console.group("-----cities.remoteMethod-------");
                console.debug("input: " + input);
                console.groupEnd();
                component.remoteMethod(input, this);
            }
        },
        mounted() {
            if(this.remotable === false || this.filterSize === 0) {
                this.fetchOptions(null);
            }
        },
        computed : {
            currentValue: {
                get() {
                    console.debug("get - city.value = " + this.value);
                    return this.value;
                },
                set(val) {
                    console.debug("city.currentValue.set = " + val);
                    this.$emit('change', val, 'city', this.options);
                }
            },
            parentIdValue: {
                get() {
                    console.group("-----cities-------");
                    console.debug("value: " + this.value);
                    console.debug("parentId: " + this.parentId);
                    console.groupEnd();
                    if(isEmpty(this.parentId)) {
                        console.debug("parentId is null, return null");
                        this.options = [];
                        return null;
                    } else {
                        this.fetchOptions(null);
                        return this.parentId;
                    }
                }
            }
        },
        watch: {
            locale(){
                // console.log("i18n.locale:" + this.locale);
                if(this.locale === 'en'){
                    this.labelName = "ename"
                }else {
                    this.labelName = "name"
                }
            }
        }
    }
</script>
